<script setup>
import {ref, defineProps} from "vue";
import {transactions_store} from "@/global_store";

const props = defineProps({
    "width_name": {
        type: String,
        validator(value) {
            console.debug("drag-size", value);
            return transactions_store[value] !== undefined;
        }
    },
    "min_width": {
        type: Number,
        default: 0,
    },
    "max_width": {
        type: Number,
        default: Infinity,
    }
})

let startX = ref(0);

function resize_column(event) {
    startX.value = event.clientX;
    let init_width = transactions_store[props.width_name].width;
    // if (!transactions_store[props.width_name].display) {
    //     init_width = 150; // 这里应该是0，但为了避免被iframe挡住，所以暂时用100
    // }
    // https://blog.csdn.net/qq_41914120/article/details/121019984
    const mask = document.createElement('div');
    mask.style.cssText = 'position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 999;cursor: col-resize;';
    document.body.append(mask);
    let listener = (event) => {
        let target_width = init_width + event.clientX - startX.value;
        let widget = transactions_store[props.width_name]; // 这变量名暂时用着，不一定合适
        widget.virtual_width = target_width;
        widget.width = target_width;
        if (target_width < widget.min_width) {
            widget.width = widget.min_width;
            if (target_width < widget.min_width / 2) {
                widget.width = 0;
                widget.show = [];
            }
        }
        if (target_width > widget.max_width) {
            widget.width = widget.max_width;
        }
    }
    let origin_select_listener = document.onselectstart;
    document.addEventListener("mousemove", listener);
    document.onselectstart = () => false;
    document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", listener);
        document.onselectstart = origin_select_listener;
        transactions_store[props.width_name].virtual_width = transactions_store[props.width_name].width;
        mask.remove();
    });
}
</script>

<template>
    <div class="drag-size" @mousedown="resize_column"></div>
</template>

<style lang="scss" scoped>
.drag-size {
    width: 10px;
    background-color: #2c3e50;
    cursor: col-resize;
    margin-left: 5px;
    margin-right: 5px;
    transition: background-color 100ms;

    &:hover,&:active {
        //margin-right: 50px;
        background-color: #66ccff88;
    }
}
</style>